import React, { useEffect, useState } from 'react'
//如果想要接收路由中传递参数，需要依靠路由中的钩子函数
import { useParams, useSearchParams } from 'react-router-dom'
import axios from 'axios'
//路由地址占位符的写法：/路由名称/参数值  =>  useParams()
//路由地址请求字符串(查询字符串)写法： /路由名称?参数名=参数值  => useSearchParams()
export default function BookDetail() {
    //调用钩子
    //数组中的第一个参数表示一个对象，可以利用其原型对象下的get方法进行获取参数名中对应的参数值
    //数组中的第二个参数表示一个函数，可以用来修改参数值
    let [search, setSearch] = useSearchParams(); //[URLSearchParams, ƒ]
    console.log(useSearchParams())

    let id = search.get('id')
    console.log(id)
    // console.log(search.get('a'))
    // console.log(search.get('b'))
    // console.log(search.get('c'))

    //定义一个状态数据
    let [oneBook, setOneBook] = useState({});

    //调用
    useEffect(() => {
        //ajax请求
        async function getOneBook() {
            let { data } = await axios.get(`/api/books/${id}`);
            //更新状态数据
            setOneBook(data);
        }
        //调用函数
        getOneBook();
    }, [])

    let changeSearch = () => {
        //调用
        setSearch("id=20&a=7&b=12&c=23");
    }


    return (
        <div className='bookone'>
            <button onClick={changeSearch}>测试修改传递的参数字符串值</button>
            <h1>{oneBook.name}</h1>
            <p className='autor'>作者:{oneBook.autor}</p>
            <p className='infro'>介绍：{oneBook.infro}</p>
            <img src={'/image/' + oneBook.img} alt="" />
        </div>
    )
}
